<template>
	<view class="text-popup-packbox">
		<comMask v-model="isSetShowPopup" :isNeedReadedClose="isCanClose">
			<view :class="['popup']" :style="{ height: height }">
				
				<image class="bg" :src="popupBgLink" mode=""></image>

				<view class="text-center" style="width: 100%; padding: 30rpx 0rpx 40rpx">
					<view class="relative flex-all-center title" style="z-index: 1; width: 100%; height: 100%">
						<slot name="title"></slot>
					</view>
				</view>

				<view class="relative scroll-content">
					<scroll-view
						:style="{
							'height': isScroll ? scrollHeight : 'unset',
							'padding': '20rpx 30rpx',
							'word-break': 'break-all',
							'word-wrap': 'break-word',
							'font-size': '24rpx',
							'color': '#FFFFFF'
						}"
						scroll-y
						@scrolltolower="scrolltolower"
						class="scroll-y">
						
						<slot></slot>
					</scroll-view>
					<slot name="footer">
						<view
							@click="setCloseFun"
							class="text-center relative margin-auto footer-content"
							:style="{ 
								'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/popup/popup-btn-img.png)`,
								'z-index': 10,
								'opacity': isCanClose ? '1' : '0.5',
							}"
						></view>
					</slot>
				</view>

				<view class="absolute root" style="width: 100%; left: 0; top: 0; z-index: 1000; height: 100%" v-if="$slots.root">
					<slot name="root"></slot>
				</view>
			</view>
		</comMask>
	</view>
</template>

<script>
	import store from '@/store'

	export default {
		name: 'comTextPopup',
		props: {
			value: {
				type: Boolean,
				default: () => true
			},
			height: {
				type: String,
				default: () => '920rpx'
			},
			scrollHeight: {
				type: String,
				default: () => '100%'
			},
			// 内容背景图
			popupBgLink: {
				type: String,
				default: () => store.getters.commonConfigs.domainFrontFileLink + '/files/images/popup/popup-text-bg.png'
			},
			// 是否允许直接点击关闭
			isAllowedClickMaskClose: {
				type: Boolean,
				default: () => true
			},
			// 是否允许关闭协议弹框：未阅读的禁止关闭
			isNeedReadedClose: {
				type: Boolean,
				default: () => true
			},
			// 内容是否需要固定高度区域滚动
			isScroll: {
				type: Boolean,
				default: () => true
			},
		},
		data() {
			return {};
		},
		computed: {
			// 是否显示弹框
			isSetShowPopup: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				}
			},
			// 是否可关闭弹框
			isCanClose() {
				return this.isAllowedClickMaskClose || this.isNeedReadedClose;
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		methods: {
			// isCanClose需阅读完才能关闭
			setCloseFun() {
				if (!this.isCanClose) {
					return uni.showToast({
						title: '请阅读到底部',
						icon: 'none'
					});
				}
				this.isSetShowPopup = false;
				return false;
			},
			scrolltolower(v) {
				this.$emit('scrolltolower', v);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.text-popup-packbox {
		position: relative;
		z-index: 1000000;
		color: #fff;
	}

	.popup {
		left: 0;
		width: 622rpx;
		position: relative;
		height: 920rpx;
		z-index: 10000;
		transition: 0.5s all;
		padding-bottom: 18rpx;
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFF;
			z-index: 1;
		}
		.footer-content {
			width: 168rpx;
			height: 68rpx;
			line-height: 82rpx;
			margin-top: 60rpx;
			background-size: 100% 100%;
		}
		.scroll-content {
			width: 100%;
			height: 780rpx;
			color: #FFFFFF;
		}
	}
</style>
